import { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { Layout } from 'antd';
import { updateCollapse } from '@/redux/modules/menu/action';
import { connect } from 'react-redux';
import LayoutMenu from './components/Menu';
import LayoutHeader from './components/Header';
import LayoutFooter from './components/Footer';
import './index.less';

const LayoutIndex = (props: any) => {
	const { Sider, Content } = Layout;
	return (
		// 这里不用 Layout 组件原因是切换页面时样式会先错乱然后在正常显示，造成页面闪屏效果
		<section className='container'>
			<Sider
				trigger={null}
				collapsed={props.isCollapse}
				width={220}
				className=' transition-all duration-500 bg-slate-800'>
				<LayoutMenu />
			</Sider>
			<Layout>
				<LayoutHeader />
				<Content>
					<Outlet />
				</Content>
				<LayoutFooter />
			</Layout>
		</section>
	);
};

const mapStateToProps = (state: any) => state.menu;
const mapDispatchToProps = { updateCollapse };
export default connect(mapStateToProps, mapDispatchToProps)(LayoutIndex);
